<template>
  <div class="def">
    <p style="text-align:center;font-size:24px;
      margin-bottom:36px;">基本信息</p>
    <div class="info" style="width:15%;float:left;">
      <p>用户名</p><p>密码</p><p>性别</p>
      <p>手机号</p><p>简介</p>
    </div>
    <div class="info" style="width:75%;float:left;">
      <p>{{userInfo.user_name}}</p><p>******</p><p>保密</p>
      <p>未设置</p><p>这个人很懒，没有简介！</p>
    </div><div style="clear:both;"></div><br>
    <el-popover
      v-model="visible"
      >
      <p style="color:red;">注销账号将会删除您的所有信息，包括但不限于购物车、<br/>
       订单等数据，请谨慎操作！</p>
      <div style="text-align: right; margin: 0;">
        <button  @click="visible = false">取消</button>
        <button  style="background:white;color:red;" @click="logoutAmount">确定</button>
      </div>
      <button slot="reference" style="margin-left: 48px;font-size:12px;background:#F78989;">注销账号</button>
    </el-popover>
  </div>
</template>

<script>
import {reqLogoutAmount} from '../../api'
import {mapState} from 'vuex'
export default {
    name:'Info',
    data() {
      return {
        visible:false
      }
    },
    methods: {
      async logoutAmount(){ //注销账号
        this.visible = false
        const logoutAmount = await reqLogoutAmount(this.$local.get('key'))
        if(logoutAmount.msg === 'success'){
          this.$message.success('注销成功！');
          localStorage.removeItem('key');
          this.$router.push('/index');
        }else{
          this.$message.error('注销失败，登录信息有误！');
          localStorage.removeItem('key');
          this.$router.push('/index');
        }
      }
    },
    computed:{
      ...mapState(['userInfo'])
    }
}
</script>

<style scoped>
  .popuper span{
    font-size: 14px;
    color: rgba(0, 0, 0, 0.829);
  }
  .popuper  div{
    margin-bottom: 10px;
  }
  .def{
    margin-top: 30px;
  }
  .info p{
    color: rgb(90, 89, 89);
    margin-left: 48px;
    line-height: 51px;
  }
</style>